<template>
  <form novalidate class="md-layout md-alignment-center-center mt-5" @submit.prevent="validateUser">
    <div class="md-layout-item md-size-30">
      <md-card class="login-box">
        <md-card-header>
          <div class="md-title">用户登录</div>
        </md-card-header>

        <md-card-content>
          <md-field :class="getValidationClass('username')">
            <label>用户名/邮箱</label>
            <md-input v-model="form.username" :disabled="sending"></md-input>
            <span class="md-error" v-if="!$v.form.username.required">请填写用户名</span>
          </md-field>
          <md-field :class="getValidationClass('password')">
            <label>密码</label>
            <md-input type="password" v-model="form.password" :disabled="sending"></md-input>
            <span class="md-error" v-if="!$v.form.password.required">请填写密码</span>
            <span class="md-error" v-else-if="!$v.form.password.minlength">密码不能少于6位</span>
          </md-field>
        </md-card-content>
        <md-progress-bar md-mode="indeterminate" v-if="sending" />

        <md-card-actions>
          <md-button class="md-primary md-raised" type="submit" :disabled="sending">登录</md-button>
          <md-button to="/auth/register">没有账号？</md-button>
        </md-card-actions>
      </md-card>
    </div>
    <md-snackbar md-position="left" :md-duration="3000" :md-active.sync="loginError" md-persistent>
      <span>登录失败：{{ loginErrorMsg }}</span>
      <md-button class="md-primary" @click="loginError = false">关闭</md-button>
    </md-snackbar>
  </form>
</template>
<script>
import { validationMixin } from 'vuelidate'
import {
    required,
    email,
    minLength,
    maxLength,
    sameAs
  } from 'vuelidate/lib/validators'
export default {
  name: 'Login',
  mixins: [validationMixin],
  data: () => ({
      form: {
        username: null,
        password: null
      },
      userSaved: false,
      sending: false,
      lastUser: null,
      loginError: false,
      loginErrorMsg: null
  }),
  validations: {
      form: {
        username: {
          required,
        },
        password: {
          required,
          minLength: minLength(6)
        }
      }
  },
  methods: {
      getValidationClass (fieldName) {
        const field = this.$v.form[fieldName]

        if (field) {
          return {
            'md-invalid': field.$invalid && field.$dirty
          }
        }
      },
      clearForm () {
        this.$v.$reset()
        this.form.username = null
        this.form.password = null
      },
      saveUser () {
        this.sending = true
        this.$http.post('/api/login', {
          name: this.form.username,
          password: this.form.password
        }).then( (res) => {
          this.sending = false
          // 保存用户信息
          console.log(this.$route)
          this.$store.dispatch('login', res.data, res.data.meta)
        }).catch( (error) => {
          this.sending = false
          this.loginError = true
          this.loginErrorMsg = error.response.data.message
        })
      },
      validateUser () {
        this.$v.$touch()

        if (!this.$v.$invalid) {
          this.saveUser()
        }
      }
    }
}
</script>
<style lang="sass" scoped>
.md-title
  text-align: left;
.md-card-actions.md-alignment-right
  justify-content: flex-start
.mt-5
  margin-top: 125px;
.login-box
  padding: 15px;
.md-progress-bar
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
</style>

